<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" width="200px">
      <el-form-item label="名称">
        <el-input v-model="form.name" placeholder="请输入书籍名称" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="form.price" placeholder="请输入书籍价格" />
      </el-form-item>
      <el-form-item label="封面">
        <el-input v-model="form.imageUrl" placeholder="请上传书籍蜂封面" />
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="form.imageUrl" placeholder="请上传书籍蜂封面" />
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="form.type" placeholder="请选择书籍分类">
          <template v-for="type in typeList">
            <el-option :key="type.id" :label="type.name" :value="type.name" />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="出版时间">
        <el-date-picker v-model="form.publishTime" type="date" placeholder="选择日期" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="书籍简介">
        <el-input v-model="form.info" type="textarea" placeholder="请输入书籍简介" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button @click="onCancel">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getTypeList } from '@/api/add_book.js'
import { addBook } from '@/api/add_book.js'
export default {
  data() {
    return {
      form: {
        name: '',
        price: '',
        imageUrl: '',
        type: '',
        info: '',
        author: '',
        publishTime: ''
      },
      typeList: []
    }
  },
  created() {
    getTypeList().then((response) => {
      console.log(response)
      this.typeList = response.data
    }).catch((err) => {
      console.log(err)
    })
  },
  methods: {
    onSubmit() {
      addBook(this.form).then((response) => {
        console.log(response)
        this.$message({
          message: '书籍添加成功',
          type: 'success'
        })
      }).catch((err) => {
        this.$message({
          message: '书籍添加失败' + err,
          type: 'error'
        })
      })
    },
    onCancel() {
      this.form = {
        name: '',
        price: '',
        image: '',
        type: '',
        info: ''
      }
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.app-container{
  width: 50%;
}
</style>

